﻿<!DOCTYPE html>
<html class="no-js" lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Category Slideshow - Shoplook Multipurpose eCommerce Bootstrap5 Html Template</title>
    <meta name="description" content="description">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Favicon -->
    <link rel="shortcut icon" th:href="@{/assets/images/favicon.png}"/>
    <!-- Plugins CSS -->
    <link rel="stylesheet" th:href="@{/assets/css/plugins.css}">
    <!-- Main Style CSS -->
    <link rel="stylesheet" th:href="@{/assets/css/style.css}">
    <link rel="stylesheet" th:href="@{/assets/css/responsive.css}">
</head>
<body class="shop-listing">
<!--Pre-Loader-->
<div id="pre-loader" class="preloader">
    <div class="preloader-in h2">
        <span>S</span><span>H</span><span>O</span><span>P</span><span>L</span><span>O</span><span>O</span><span>K</span>
    </div>
</div>
<!--End Pre-Loader-->
<div class="page-wrapper">
    <!--引入片段-->
    <div th:replace="~{include_header::header}"></div>

    <div id="page-content">
        <!--Body Container-->
        <!--Page Header-->
        <div class="page-header" style="background-image: url(assets/images/page-header/page-banner1.jpg)">
            <div class="page-title"><h1>Category Slideshow</h1></div>
            <!--Breadcrumbs-->
            <div class="breadcrumbs-wrapper">
                <div class="container">
                    <div class="breadcrumbs"><a href="index.html" title="Back to the home page"><i
                            class="an an-home icon-home"></i></a> <span aria-hidden="true"><i
                            class="an an-angle-right"></i></span> <span>Category Slideshow</span></div>
                </div>
            </div>
            <!--End Breadcrumbs-->
        </div>
        <!--End Page Header-->
        <div class="container">
            <div class="row">
                <!--Sidebar-->
                <div class="col-12 col-sm-12 col-md-3 col-lg-3 sidebar filterbar">
                    <div class="closeFilter d-block d-md-none d-lg-none"><i class="icon an an-times"></i></div>
                    <div class="sidebar_tags">
                        <div class="filter-sidebar">
                            <h3>Filter By</h3>
                            <div class="filter-by">
                                <h5>Now Shopping by</h5>
                                <div class="filter-by-content">
                                    <b>Brand:</b><br>
                                    <p>Samsung</p>
                                    <a href="#;" class="close-icon"><i class="an an-times"></i></a>
                                </div>
                                <a href="#;" class="btn btn--small">Clear All</a>
                            </div>
                            <hr>
                            <!--Categories-->
                            <div class="sidebar_widget categories filter-widget">
                                <div class="widget-title"><h2>Categories</h2></div>
                                <div class="widget-content" style="">
                                    <ul class="sidebar_categories">
                                        <li class="level1 sub-level"><a href="#;" class="site-nav">Clothing</a>
                                            <ul class="sublinks" style="display: none;">
                                                <li class="level2"><a href="#;" class="site-nav">Men</a></li>
                                                <li class="level2"><a href="#;" class="site-nav">Women</a></li>
                                                <li class="level2"><a href="#;" class="site-nav">Child</a></li>
                                                <li class="level2"><a href="#;" class="site-nav">View All Clothing</a>
                                                </li>
                                            </ul>
                                        </li>
                                        <li class="level1 sub-level"><a href="#;" class="site-nav">Jewellery</a>
                                            <ul class="sublinks">
                                                <li class="level2"><a href="#;" class="site-nav">Ring</a></li>
                                                <li class="level2"><a href="#;" class="site-nav">Neckalses</a></li>
                                                <li class="level2"><a href="#;" class="site-nav">Eaarings</a></li>
                                                <li class="level2"><a href="#;" class="site-nav">View All Jewellery</a>
                                                </li>
                                            </ul>
                                        </li>
                                        <li class="lvl-1"><a href="#;" class="site-nav">Shoes</a></li>
                                        <li class="lvl-1"><a href="#;" class="site-nav">Accessories</a></li>
                                        <li class="lvl-1"><a href="#;" class="site-nav">Collections</a></li>
                                        <li class="lvl-1"><a href="#;" class="site-nav">Sale</a></li>
                                        <li class="lvl-1"><a href="#;" class="site-nav">Page</a></li>
                                    </ul>
                                </div>
                            </div>
                            <!--Categories-->
                            <!--Price Filter-->
                            <div class="sidebar_widget filterBox filter-widget">
                                <div class="widget-title">
                                    <h2>Price</h2>
                                </div>
                                <form action="#" method="post" class="price-filter">
                                    <div id="slider-range"></div>
                                    <div class="row">
                                        <div class="col-6">
                                            <p class="no-margin"><input id="amount" type="text"></p>
                                        </div>
                                        <div class="col-6 text-right margin-25px-top">
                                            <button class="btn btn-secondary btn--small">filter</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <!--End Price Filter-->
                            <!--Size Swatches-->
                            <div class="sidebar_widget filterBox filter-widget size-swacthes">
                                <div class="widget-title"><h2>Size</h2></div>
                                <div class="filter-color swacth-list">
                                    <ul>
                                        <li><span class="swacth-btn">X</span><span class="tooltip-label">X</span></li>
                                        <li><span class="swacth-btn">XL</span><span class="tooltip-label">XL</span></li>
                                        <li><span class="swacth-btn">XLL</span><span class="tooltip-label">XLL</span>
                                        </li>
                                        <li><span class="swacth-btn">M</span><span class="tooltip-label">M</span></li>
                                        <li><span class="swacth-btn">L</span><span class="tooltip-label">L</span></li>
                                        <li><span class="swacth-btn">S</span><span class="tooltip-label">S</span></li>
                                        <li><span class="swacth-btn">XXL</span><span class="tooltip-label">XLL</span>
                                        </li>
                                        <li><span class="swacth-btn">XS</span><span class="tooltip-label">XS</span></li>
                                    </ul>
                                </div>
                            </div>
                            <!--End Size Swatches-->
                            <!--Color Swatches-->
                            <div class="sidebar_widget filterBox filter-widget">
                                <div class="widget-title"><h2>Color</h2></div>
                                <div class="filter-color swacth-list clearfix">
                                    <ul>
                                        <li><span class="swacth-btn black"></span><span
                                                class="tooltip-label">Black</span></li>
                                        <li><span class="swacth-btn white"></span><span
                                                class="tooltip-label">White</span></li>
                                        <li><span class="swacth-btn red"></span><span class="tooltip-label">Red</span>
                                        </li>
                                        <li><span class="swacth-btn blue"></span><span class="tooltip-label">Blue</span>
                                        </li>
                                        <li><span class="swacth-btn pink"></span><span class="tooltip-label">Pink</span>
                                        </li>
                                        <li><span class="swacth-btn gray"></span><span class="tooltip-label">Gray</span>
                                        </li>
                                        <li><span class="swacth-btn green"></span><span
                                                class="tooltip-label">Green</span></li>
                                        <li><span class="swacth-btn orange"></span><span
                                                class="tooltip-label">Orange</span></li>
                                        <li><span class="swacth-btn yellow"></span><span
                                                class="tooltip-label">Yellow</span></li>
                                        <li><span class="swacth-btn blueviolet"></span><span class="tooltip-label">Blue Violet</span>
                                        </li>
                                        <li><span class="swacth-btn brown"></span><span
                                                class="tooltip-label">Brown</span></li>
                                        <li><span class="swacth-btn darkGoldenRod"></span><span class="tooltip-label">Dark Golden Red</span>
                                        </li>
                                        <li><span class="swacth-btn darkGreen"></span><span class="tooltip-label">Dark Green</span>
                                        </li>
                                        <li><span class="swacth-btn darkRed"></span><span
                                                class="tooltip-label">Dark Red</span></li>
                                        <li><span class="swacth-btn khaki"></span><span
                                                class="tooltip-label">Khaki</span></li>
                                        <li><span class="swacth-btn blue-red"></span><span class="tooltip-label">Blue/Red</span>
                                        </li>
                                        <li><span class="swacth-btn black-grey"></span><span class="tooltip-label">Black/Grey</span>
                                        </li>
                                        <li><span class="swacth-btn pink-black"></span><span class="tooltip-label">pink-Black</span>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <!--End Color Swatches-->
                            <!--Brand-->
                            <div class="sidebar_widget filterBox filter-widget brand-filter">
                                <div class="widget-title"><h2>Brands</h2></div>
                                <ul>
                                    <li>
                                        <input type="checkbox" value="allen-vela" id="check1">
                                        <label for="check1"><span><span></span></span>Allen Vela</label>
                                    </li>
                                    <li>
                                        <input type="checkbox" value="oxymat" id="check3">
                                        <label for="check3"><span><span></span></span>Oxymat</label>
                                    </li>
                                    <li>
                                        <input type="checkbox" value="vanelas" id="check4">
                                        <label for="check4"><span><span></span></span>Vanelas</label>
                                    </li>
                                    <li>
                                        <input type="checkbox" value="pagini" id="check5">
                                        <label for="check5"><span><span></span></span>Pagini</label>
                                    </li>
                                    <li>
                                        <input type="checkbox" value="monark" id="check6">
                                        <label for="check6"><span><span></span></span>Monark</label>
                                    </li>
                                </ul>
                            </div>
                            <!--End Brand-->
                        </div>
                        <!--Popular Products-->
                        <div class="sidebar_widget sidePro">
                            <div class="widget-title"><h2>Popular Products</h2></div>
                            <div class="widget-content">
                                <div class="sideProSlider grid-products">
                                    <div class="item">
                                        <!-- start product image -->
                                        <div class="product-image">
                                            <!-- start product image -->
                                            <a href="product-layout1.html" class="product-img">
                                                <!-- image -->
                                                <img class="primary blur-up lazyload"
                                                     data-src="assets/images/product-images/elt-p-3-1.jpg"
                                                     src="assets/images/product-images/elt-p-3-1.jpg" alt="" title="">
                                                <!-- End image -->
                                                <!-- Hover image -->
                                                <img class="hover blur-up lazyload"
                                                     data-src="assets/images/product-images/elt-p-3.jpg"
                                                     src="assets/images/product-images/elt-p-3.jpg" alt="" title="">
                                                <!-- End hover image -->
                                            </a>
                                            <!-- end product image -->

                                            <!--Product Button-->
                                            <div class="button-set style3">
                                                <ul>
                                                    <li>
                                                        <!--Quick View Button-->
                                                        <a href="#quickview-popup" title="Quick View"
                                                           class="btn-icon quick-view-popup quick-view"
                                                           data-bs-toggle="modal" data-bs-target="#quickview_popup">
                                                            <i class="icon an an-expand-arrows-alt"></i>
                                                            <span class="tooltip-label">Quick View</span>
                                                        </a>
                                                        <!--End Quick View Button-->
                                                    </li>
                                                    <li>
                                                        <!--Wishlist Button-->
                                                        <div class="wishlist-btn">
                                                            <a class="btn-icon wishlist add-to-wishlist"
                                                               href="my-wishlist.html">
                                                                <i class="icon an an-heart-o"></i>
                                                                <span class="tooltip-label">Add To Wishlist</span>
                                                            </a>
                                                        </div>
                                                        <!--End Wishlist Button-->
                                                    </li>
                                                    <li>
                                                        <!--Compare Button-->
                                                        <div class="compare-btn">
                                                            <a class="btn-icon compare add-to-compare"
                                                               href="compare-style2.html" title="Add to Compare">
                                                                <i class="icon an an-balance-scale"></i>
                                                                <span class="tooltip-label">Add to Compare</span>
                                                            </a>
                                                        </div>
                                                        <!--End Compare Button-->
                                                    </li>
                                                </ul>
                                            </div>
                                            <!--End Product Button-->
                                        </div>
                                        <!-- end product image -->
                                        <!--start product details -->
                                        <div class="product-details text-left">
                                            <!--Brand name-->
                                            <div class="brand-name">Xbox</div>
                                            <!--End Brand name-->
                                            <!-- product name -->
                                            <div class="product-name">
                                                <a href="product-layout1.html">PS4 500 GB Gaming Console</a>
                                            </div>
                                            <!-- End product name -->
                                            <!-- product price -->
                                            <div class="product-price">
                                                <span class="price">$399.01</span>
                                            </div>
                                            <!-- End product price -->
                                            <!--Product Review-->
                                            <div class="product-review">
                                                <i class="an an-star"></i><i class="an an-star"></i><i
                                                    class="an an-star"></i><i class="an an-star"></i><i
                                                    class="an an-star gray-star"></i><span class="review-label"><a
                                                    href="#;" tabindex="0"> 6 Reviews</a></span>
                                            </div>
                                            <!--End Product Review-->
                                            <!--Color Variant -->
                                            <ul class="swatches">
                                                <li class="swatch small sqaure navy"><span
                                                        class="tooltip-label">Navy</span></li>
                                                <li class="swatch small sqaure green"><span
                                                        class="tooltip-label">Green</span></li>
                                                <li class="swatch small sqaure gray"><span
                                                        class="tooltip-label">Gray</span></li>
                                                <li class="swatch small sqaure aqua"><span
                                                        class="tooltip-label">Aqua</span></li>
                                                <li class="swatch small sqaure orange"><span class="tooltip-label">Orange</span>
                                                </li>
                                            </ul>
                                            <!-- End Variant -->
                                            <!--Cart Button-->
                                            <a href="#pro-addtocart-popup" title="Add to Cart"
                                               class="btn-icon btn btn-addto-cart" data-bs-toggle="modal"
                                               data-bs-target="#pro-addtocart-popup">
                                                <i class="icon an an-shopping-cart"></i> <span>Add to Cart</span>
                                            </a>
                                            <!--end Cart Button-->
                                        </div>
                                        <!-- End product details -->
                                    </div>
                                    <div class="item">
                                        <!-- start product image -->
                                        <div class="product-image">
                                            <!-- start product image -->
                                            <a href="product-layout1.html" class="product-img">
                                                <!-- image -->
                                                <img class="primary blur-up lazyload"
                                                     data-src="assets/images/product-images/elt-p-5-1.jpg"
                                                     src="assets/images/product-images/elt-p-5-1.jpg" alt="" title="">
                                                <!-- End image -->
                                                <!-- Hover image -->
                                                <img class="hover blur-up lazyload"
                                                     data-src="assets/images/product-images/elt-p-5.jpg"
                                                     src="assets/images/product-images/elt-p-5.jpg" alt="" title="">
                                                <!--End hover image-->
                                                <!--Product Label-->
                                                <div class="product-labels"><span class="lbl on-sale">Sale</span></div>
                                                <!--End Product Label-->
                                            </a>
                                            <!-- end product image -->
                                            <!--Product Button-->
                                            <div class="button-set style3">
                                                <ul>
                                                    <li>
                                                        <!--Quick View Button-->
                                                        <a href="#quickview-popup" title="Quick View"
                                                           class="btn-icon quick-view-popup quick-view"
                                                           data-bs-toggle="modal" data-bs-target="#quickview_popup">
                                                            <i class="icon an an-expand-arrows-alt"></i>
                                                            <span class="tooltip-label">Quick View</span>
                                                        </a>
                                                        <!--End Quick View Button-->
                                                    </li>
                                                    <li>
                                                        <!--Wishlist Button-->
                                                        <div class="wishlist-btn">
                                                            <a class="btn-icon wishlist add-to-wishlist"
                                                               href="my-wishlist.html">
                                                                <i class="icon an an-heart-o"></i>
                                                                <span class="tooltip-label">Add To Wishlist</span>
                                                            </a>
                                                        </div>
                                                        <!--End Wishlist Button-->
                                                    </li>
                                                    <li>
                                                        <!--Compare Button-->
                                                        <div class="compare-btn">
                                                            <a class="btn-icon compare add-to-compare"
                                                               href="compare-style2.html" title="Add to Compare">
                                                                <i class="icon an an-balance-scale"></i>
                                                                <span class="tooltip-label">Add to Compare</span>
                                                            </a>
                                                        </div>
                                                        <!--End Compare Button-->
                                                    </li>
                                                </ul>
                                            </div>
                                            <!--End Product Button-->
                                        </div>
                                        <!-- end product image -->
                                        <!--start product details -->
                                        <div class="product-details text-left">
                                            <!--Brand name-->
                                            <div class="brand-name">Samsung</div>
                                            <!--End Brand name-->
                                            <!-- product name -->
                                            <div class="product-name">
                                                <a href="product-layout1.html">Samsung Galaxy S6 Edge</a>
                                            </div>
                                            <!-- End product name -->
                                            <!-- product price -->
                                            <div class="product-price">
                                                <span class="price">$199.01</span>
                                            </div>
                                            <!-- End product price -->
                                            <!--Product Review-->
                                            <div class="product-review">
                                                <i class="an an-star"></i><i class="an an-star"></i><i
                                                    class="an an-star"></i><i class="an an-star"></i><i
                                                    class="an an-star gray-star"></i><span class="review-label"><a
                                                    href="#;" tabindex="0"> 2 Reviews</a></span>
                                            </div>
                                            <!--End Product Review-->
                                            <!-- Color Variant -->
                                            <ul class="swatches">
                                                <li class="swatch small sqaure black"><span
                                                        class="tooltip-label">Black</span></li>
                                                <li class="swatch small sqaure navy"><span
                                                        class="tooltip-label">Navy</span></li>
                                                <li class="swatch small sqaure purple"><span class="tooltip-label">Purple</span>
                                                </li>
                                            </ul>
                                            <!-- End Variant -->
                                            <!--Cart Button-->
                                            <a href="#pro-addtocart-popup" title="Add to Cart"
                                               class="btn-icon btn btn-addto-cart" data-bs-toggle="modal"
                                               data-bs-target="#pro-addtocart-popup">
                                                <i class="icon an an-shopping-cart"></i> <span>Add to Cart</span>
                                            </a>
                                            <!--end Cart Button-->
                                        </div>
                                        <!-- End product details -->
                                    </div>
                                    <div class="item">
                                        <!-- start product image -->
                                        <div class="product-image">
                                            <!-- start product image -->
                                            <a href="product-layout1.html" class="product-img">
                                                <!-- image -->
                                                <img class="primary blur-up lazyload"
                                                     data-src="assets/images/product-images/elt-p-4.jpg"
                                                     src="assets/images/product-images/elt-p-4.jpg" alt="" title="">
                                                <!-- End image -->
                                                <!-- Hover image -->
                                                <img class="hover blur-up lazyload"
                                                     data-src="assets/images/product-images/elt-p-4-1.jpg"
                                                     src="assets/images/product-images/elt-p-4-1.jpg" alt="" title="">
                                                <!-- End hover image -->
                                            </a>
                                            <!-- end product image -->
                                            <!--Product Button-->
                                            <div class="button-set style3">
                                                <ul>
                                                    <li>
                                                        <!--Quick View Button-->
                                                        <a href="#quickview-popup" title="Quick View"
                                                           class="btn-icon quick-view-popup quick-view"
                                                           data-bs-toggle="modal" data-bs-target="#quickview_popup">
                                                            <i class="icon an an-expand-arrows-alt"></i>
                                                            <span class="tooltip-label">Quick View</span>
                                                        </a>
                                                        <!--End Quick View Button-->
                                                    </li>
                                                    <li>
                                                        <!--Wishlist Button-->
                                                        <div class="wishlist-btn">
                                                            <a class="btn-icon wishlist add-to-wishlist"
                                                               href="my-wishlist.html">
                                                                <i class="icon an an-heart-o"></i>
                                                                <span class="tooltip-label">Add To Wishlist</span>
                                                            </a>
                                                        </div>
                                                        <!--End Wishlist Button-->
                                                    </li>
                                                    <li>
                                                        <!--Compare Button-->
                                                        <div class="compare-btn">
                                                            <a class="btn-icon compare add-to-compare"
                                                               href="compare-style2.html" title="Add to Compare">
                                                                <i class="icon an an-balance-scale"></i>
                                                                <span class="tooltip-label">Add to Compare</span>
                                                            </a>
                                                        </div>
                                                        <!--End Compare Button-->
                                                    </li>
                                                </ul>
                                            </div>
                                            <!--End Product Button-->
                                        </div>
                                        <!-- end product image -->
                                        <!--start product details -->
                                        <div class="product-details text-left">
                                            <!--Brand name-->
                                            <div class="brand-name">Philips</div>
                                            <!--End Brand name-->
                                            <!--product name-->
                                            <div class="product-name">
                                                <a href="product-layout1.html">Men Shaver & Trimmer</a>
                                            </div>
                                            <!-- End product name -->
                                            <!-- product price -->
                                            <div class="product-price">
                                                <span class="price">$99.01</span>
                                            </div>
                                            <!-- End product price -->
                                            <!--Product Review-->
                                            <div class="product-review">
                                                <i class="an an-star"></i><i class="an an-star"></i><i
                                                    class="an an-star"></i><i class="an an-star"></i><i
                                                    class="an an-star"></i><span class="review-label"><a href="#;"
                                                                                                         tabindex="0"> 20 Reviews</a></span>
                                            </div>
                                            <!--End Product Review-->
                                            <!-- Color Variant -->
                                            <ul class="swatches">
                                                <li class="swatch small sqaure red"><span
                                                        class="tooltip-label">red</span></li>
                                                <li class="swatch small sqaure orange"><span class="tooltip-label">orange</span>
                                                </li>
                                                <li class="swatch small sqaure yellow"><span class="tooltip-label">yellow</span>
                                                </li>
                                            </ul>
                                            <!-- End Variant -->
                                            <!--Cart Button-->
                                            <a href="#pro-addtocart-popup" title="Add to Cart"
                                               class="btn-icon btn btn-addto-cart" data-bs-toggle="modal"
                                               data-bs-target="#pro-addtocart-popup">
                                                <i class="icon an an-shopping-cart"></i> <span>Add to Cart</span>
                                            </a>
                                            <!--end Cart Button-->
                                        </div>
                                        <!-- End product details -->
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--End Popular Products-->
                        <!--Information-->
                        <div class="sidebar_widget">
                            <div class="widget-title"><h2>GLOBAL HTML TEXT BLOCK</h2></div>
                            <div class="widget-content"><p>Use this text to share information about your brand with your
                                customers.</p>
                                <p>Describe a product, share announcements, or welcome customers to your store.</p>
                            </div>
                        </div>
                        <!--end Information-->
                        <!--Product Tags-->
                        <div class="sidebar_widget">
                            <div class="widget-title">
                                <h2>Product Tags</h2>
                            </div>
                            <div class="widget-content">
                                <ul class="product-tags">
                                    <li><a href="#" title="Show products matching tag $100 - $400">$100 - $400</a></li>
                                    <li><a href="#" title="Show products matching tag $400 - $600">$400 - $600</a></li>
                                    <li><a href="#" title="Show products matching tag $600 - $800">$600 - $800</a></li>
                                    <li><a href="#" title="Show products matching tag Above $800">Above $800</a></li>
                                    <li><a href="#" title="Show products matching tag Allen Vela">Allen Vela</a></li>
                                    <li><a href="#" title="Show products matching tag Black">Black</a></li>
                                    <li><a href="#" title="Show products matching tag Blue">Blue</a></li>
                                    <li><a href="#" title="Show products matching tag Cantitate">Cantitate</a></li>
                                    <li><a href="#" title="Show products matching tag Famiza">Famiza</a></li>
                                    <li><a href="#" title="Show products matching tag Gray">Gray</a></li>
                                    <li><a href="#" title="Show products matching tag Green">Green</a></li>
                                    <li style="display: none;"><a href="#"
                                                                  title="Show products matching tag Hot">Hot</a></li>
                                    <li style="display: none;"><a href="#" title="Show products matching tag jean shop">jean
                                        shop</a></li>
                                    <li style="display: none;"><a href="#"
                                                                  title="Show products matching tag jesse kamm">jesse
                                        kamm</a></li>
                                    <li style="display: none;"><a href="#" title="Show products matching tag L">L</a>
                                    </li>
                                    <li style="display: none;"><a href="#" title="Show products matching tag Lardini">Lardini</a>
                                    </li>
                                    <li style="display: none;"><a href="#" title="Show products matching tag lareida">lareida</a>
                                    </li>
                                    <li style="display: none;"><a href="#" title="Show products matching tag Lirisla">Lirisla</a>
                                    </li>
                                    <li style="display: none;"><a href="#" title="Show products matching tag M">M</a>
                                    </li>
                                    <li style="display: none;"><a href="#"
                                                                  title="Show products matching tag mini-dress">mini-dress</a>
                                    </li>
                                    <li style="display: none;"><a href="#" title="Show products matching tag Monark">Monark</a>
                                    </li>
                                    <li style="display: none;"><a href="#"
                                                                  title="Show products matching tag Navy">Navy</a></li>
                                    <li style="display: none;"><a href="#"
                                                                  title="Show products matching tag new">new</a></li>
                                    <li style="display: none;"><a href="#"
                                                                  title="Show products matching tag new arrivals">new
                                        arrivals</a></li>
                                    <li style="display: none;"><a href="#" title="Show products matching tag Orange">Orange</a>
                                    </li>
                                    <li style="display: none;"><a href="#" title="Show products matching tag oxford">oxford</a>
                                    </li>
                                    <li style="display: none;"><a href="#" title="Show products matching tag Oxymat">Oxymat</a>
                                    </li>
                                </ul>
                                <span class="btn btn--small btnview">View all</span></div>
                        </div>
                        <!--end Product Tags-->
                        <!--Banner-->
                        <div class="sidebar_widget static-banner">
                            <a href="#"><img src="assets/images/sidebar-banner.jpg"
                                             data-src="assets/images/sidebar-banner.jpg" alt=""></a>
                        </div>
                        <!--Banner-->
                    </div>
                </div>
                <!--End Sidebar-->
                <!--Main Content-->
                <div class="col-12 col-sm-12 col-md-9 col-lg-9 main-col">
                    <div class="category-banner-slider">
                        <div class="slide-item">
                            <img src="assets/images/collection-banner/1025x300-2.jpg"
                                 data-src="assets/images/collection-banner/1025x300-2.jpg" alt=""/>
                        </div>
                        <div class="slide-item">
                            <img src="assets/images/collection-banner/1025x300-1.jpg"
                                 data-src="assets/images/collection-banner/1025x300-1.jpg" alt=""/>
                        </div>
                    </div>
                    <div class="category-description">
                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
                            been the industry's standard dummy text ever since the 1500s, when an unknown printer took a
                            galley of type and scrambled it to make a type specimen book. It has survived not only five
                            centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
                            It was popularised in the 1960s with the release of Letraset sheets containing.</p>
                    </div>

                    <!--Toolbar-->
                    <button type="button" class="btn btn-filter d-block d-md-none d-lg-none"> Product Filters</button>
                    <div class="toolbar">
                        <div class="filters-toolbar-wrapper">
                            <div class="row">
                                <div class="col-4 col-md-4 col-lg-4 filters-toolbar__item collection-view-as d-flex justify-content-start align-items-center">
                                    <a href="shop-left-sidebar.html" title="Grid View" class="change-view">
                                        <i class="an an-lg an-th-large" aria-hidden="true"></i>
                                    </a>
                                    <a href="shop-list-view.html" title="List View"
                                       class="change-view change-view--active">
                                        <i class="an an-lg an-th-list" aria-hidden="true"></i>
                                    </a>
                                </div>
                                <div class="col-4 col-md-4 col-lg-4 text-center filters-toolbar__item filters-toolbar__item--count d-flex justify-content-center align-items-center">
                                    <span class="filters-toolbar__product-count">Showing: 15 Results</span>
                                </div>
                                <div class="col-4 col-md-4 col-lg-4 text-right">
                                    <div class="filters-toolbar__item">
                                        <label for="SortBy" class="hidden">Sort</label>
                                        <select name="SortBy" id="SortBy"
                                                class="filters-toolbar__input filters-toolbar__input--sort">
                                            <option value="title-ascending" selected="selected">Sort</option>
                                            <option>Best Selling</option>
                                            <option>Alphabetically, A-Z</option>
                                            <option>Alphabetically, Z-A</option>
                                            <option>Price, low to high</option>
                                            <option>Price, high to low</option>
                                            <option>Date, new to old</option>
                                            <option>Date, old to new</option>
                                        </select>
                                        <input class="collection-header__default-sort" type="hidden" value="manual">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--End Toolbar-->
                    <!--Product Grid-->
                    <div class="product-load-more">
                        <div class="grid-products grid--view-items">
                            <div class="row">
                                <div th:each="good:${page.records}" class="col-6 col-sm-6 col-md-4 col-lg-4 item">
                                    <!-- start product image -->
                                    <div class="product-image">
                                        <!-- start product image -->
                                        <a th:href="@{/detail(id=${good.id})}" class="product-img">
                                            <!-- image -->
                                            <img class="primary blur-up lazyload"
                                                th:attr="data-src=@{${good.mainPicUrl ?: '/assets/images/product-images/default.jpg'}}"
                                                th:src="@{${good.mainPicUrl ?: '/assets/images/product-images/default.jpg'}}" alt="" title="">
                                            <!-- End image -->
                                            <!-- Hover image -->
                                            <img class="hover blur-up lazyload"
                                                th:attr="data-src=@{${good.mainPicUrl ?: '/assets/images/product-images/default.jpg'}}"
                                                th:src="@{${good.mainPicUrl ?: '/assets/images/product-images/default.jpg'}}" alt="" title="">
                                            <!-- End hover image -->
                                            <!-- product label -->
                                            <div class="product-labels"><span class="lbl on-sale">Sale</span></div>
                                            <!-- End product label -->
                                        </a>
                                        <!-- end product image -->

                                        <!--Product Button-->
                                        <div class="button-set style3">
                                            <ul>
                                                <li>
                                                    <!--Quick View Button-->
                                                    <a href="#quickview-popup" title="Quick View"
                                                       class="btn-icon quick-view-popup quick-view"
                                                       data-bs-toggle="modal" data-bs-target="#quickview_popup">
                                                        <i class="icon an an-expand-arrows-alt"></i>
                                                        <span class="tooltip-label">Quick View</span>
                                                    </a>
                                                    <!--End Quick View Button-->
                                                </li>
                                                <li>
                                                    <!--Wishlist Button-->
                                                    <div class="wishlist-btn">
                                                        <a class="btn-icon wishlist add-to-wishlist"
                                                           href="my-wishlist.html">
                                                            <i class="icon an an-heart-o"></i>
                                                            <span class="tooltip-label">Add To Wishlist</span>
                                                        </a>
                                                    </div>
                                                    <!--End Wishlist Button-->
                                                </li>
                                                <li>
                                                    <!--Compare Button-->
                                                    <div class="compare-btn">
                                                        <a class="btn-icon compare add-to-compare"
                                                           href="compare-style2.html" title="Add to Compare">
                                                            <i class="icon an an-balance-scale"></i>
                                                            <span class="tooltip-label">Add to Compare</span>
                                                        </a>
                                                    </div>
                                                    <!--End Compare Button-->
                                                </li>
                                            </ul>
                                        </div>
                                        <!--End Product Button-->
                                    </div>
                                    <!-- end product image -->

                                    <!--start product details -->
                                    <div class="product-details text-left">
                                        <!--Brand Name-->
                                        <div class="brand-name">Coolpix</div>
                                        <!--End Brand Name-->
                                        <!-- product name -->
                                        <div class="product-name">
                                            <a th:href="@{/detail(id=${good.id})}" th:text="${good.name}">Coolpix (A100) 20 MP Point & Shoot Camera</a>
                                        </div>
                                        <!-- End product name -->
                                        <!-- product price -->
                                        <div class="product-price">
                                            <span class="old-price" th:if="${good.marketPrice}" th:text="|&yen;${good.marketPrice}|">$499.00</span>
                                            <span class="price" th:text="|&yen;${good.price ?: 0}|">$400.00</span>
                                        </div>
                                        <!-- End product price -->
                                        <!--Product Review-->
                                        <div class="product-review">
                                            <i class="an an-star"></i>
                                            <i class="an an-star"></i>
                                            <i class="an an-star"></i>
                                            <i class="an an-star"></i>
                                            <i class="an an-star"></i>
                                            <span class="review-label"><a href="#;">5 Reviews</a></span>
                                        </div>
                                        <!--End Product Review-->
                                        <!--Color Variant -->
                                        <ul class="swatches">
                                            <li class="swatch small navy"><span class="tooltip-label">Navy</span></li>
                                            <li class="swatch small green"><span class="tooltip-label">Green</span></li>
                                            <li class="swatch small gray"><span class="tooltip-label">Gray</span></li>
                                            <li class="swatch small aqua"><span class="tooltip-label">Aqua</span></li>
                                            <li class="swatch small orange"><span class="tooltip-label">Orange</span>
                                            </li>
                                        </ul>
                                        <!-- End Variant -->
                                        <!--Cart Button-->
                                        <a href="#pro-addtocart-popup" title="Add to Cart"
                                           class="btn-icon btn btn-addto-cart" data-bs-toggle="modal"
                                           data-bs-target="#pro-addtocart-popup">
                                            <i class="icon an an-shopping-cart"></i> <span>Add to Cart</span>
                                        </a>
                                        <!--end Cart Button-->
                                    </div>
                                    <!-- End product details -->
                                </div>
                            </div>
                        </div>
                        <!--End Product Grid-->
                        <hr>
                        <!--Load More Button-->
                        <div class="infinitpaginOuter">
                            <div class="infinitpagin">
                                <a href="#" class="btn btn-large loadMore">Load More Products</a>
                            </div>
                        </div>
                        <!--End Load More Button-->
                    </div>
                </div>
                <!--End Main Content-->
            </div>

        </div><!--End Body Container-->

    </div><!--End Page Wrapper-->

    <!--Footer-->
    <div class="footer footer-1">
        <div class="footer-top clearfix">
            <div class="container">
                <div class="row">
                    <div class="col-12 col-sm-12 col-md-4 col-lg-3 about-us-col">
                        <img src="assets/images/logo-white.png" alt="ShopLook"/>
                        <p>55 Gallaxy Enque, 2568 steet,<br>23568 NY</p>
                        <p><b>Phone</b>: (440) 000 000 0000</p>
                        <p><b>Email</b>: <a href="mailto:sales@yousite.com">sales@yousite.com</a></p>
                        <ul class="list--inline social-icons">
                            <li><a href="#"><i class="icon an an-facebook-f"></i></a></li>
                            <li><a href="#"><i class="icon an an-twitter"></i></a></li>
                            <li><a href="#"><i class="icon an an-pinterest-p"></i></a></li>
                            <li><a href="#"><i class="icon an an-instagram"></i></a></li>
                            <li><a href="#"><i class="icon an an-youtube"></i></a></li>
                        </ul>
                    </div>
                    <div class="col-12 col-sm-12 col-md-4 col-lg-3 footer-links">
                        <h4 class="h4">Quick Shop</h4>
                        <ul>
                            <li><a href="#">Home Appliances</a></li>
                            <li><a href="#">Phones &amp; Tablet</a></li>
                            <li><a href="#">Audio &amp; Video</a></li>
                            <li><a href="#">Digital Cameras</a></li>
                            <li><a href="#">Accessories</a></li>
                            <li><a href="#">Computer &amp; Laptop</a></li>
                            <li><a href="#">Game &amp; Video</a></li>
                        </ul>
                    </div>
                    <div class="col-12 col-sm-12 col-md-4 col-lg-3 footer-links">
                        <h4 class="h4">Informations</h4>
                        <ul>
                            <li><a href="login.html">Login</a></li>
                            <li><a href="my-account.html">My Account</a></li>
                            <li><a href="#">View Cart</a></li>
                            <li><a href="#">Privacy policy</a></li>
                            <li><a href="#">Shipping &amp; Returns</a></li>
                            <li><a href="#">Terms &amp; condition</a></li>
                            <li><a href="#">404 Page</a></li>
                        </ul>
                    </div>
                    <div class="col-12 col-sm-12 col-md-4 col-lg-3 footer-links">
                        <h4 class="h4">Customer Services</h4>
                        <ul>
                            <li><a href="blog-left-sidebar.html">Blog</a></li>
                            <li><a href="aboutus-style1.html">About us</a></li>
                            <li><a href="faqs-style1.html">FAQ's</a></li>
                            <li><a href="contact-style1.html">Contact Us</a></li>
                            <li><a href="#">Orders and Returns</a></li>
                            <li><a href="#">Track My Order</a></li>
                            <li><a href="#">Support Center</a></li>
                        </ul>
                    </div>
                    <div class="col-12 col-sm-12 col-md-4 col-lg-3 newsletter-col">
                        <div class="display-table">
                            <div class="display-table-cell footer-newsletter">
                                <form action="#" method="post">
                                    <label class="h4">Sign Up To Our Newsletter</label>
                                    <p>Enter your email to receive daily news and get 20% off coupon for all items.</p>
                                    <div class="input-group">
                                        <input type="email" class="input-group__field newsletter-input" name="EMAIL"
                                               value="" placeholder="Email Your address" required>
                                        <span class="input-group__btn">
                                                    <button type="submit" class="btn btn-secondary newsletter__submit"
                                                            name="commit" id="Subscribe"><span
                                                            class="newsletter__submit-text--large">Subscribe</span></button>
                                                </span>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer-bottom clearfix">
            <div class="container">
                <ul class="payment-icons list--inline">
                    <li><i class="an an-cc-visa" aria-hidden="true"></i></li>
                    <li><i class="an an-cc-mastercard" aria-hidden="true"></i></li>
                    <li><i class="an an-cc-amex" aria-hidden="true"></i></li>
                    <li><i class="an an-cc-paypal" aria-hidden="true"></i></li>
                    <li><i class="an an-cc-discover" aria-hidden="true"></i></li>
                    <li><i class="an an-cc-stripe" aria-hidden="true"></i></li>
                    <li><i class="an an-cc-jcb" aria-hidden="true"></i></li>
                </ul>
                <div class="copytext">
                    &copy; 2022 ShopLook. All Rights By <a href="http://www.bootstrapMB.com">bootstrapMB</a>.
                </div>
            </div>
        </div>
    </div>
    <!--End Footer-->

    <!--Scoll Top-->
    <span id="site-scroll"><i class="icon an an-arrow-up"></i></span>
    <!--End Scoll Top-->

    <!--MiniCart Drawer-->
    <div class="minicart-right-drawer modal right fade" id="minicart-drawer">
        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
            <div class="modal-content">
                <div id="cart-drawer" class="block block-cart">
                    <a href="javascript:void(0);" class="close-cart" data-bs-dismiss="modal" aria-label="Close"><i
                            class="an an-times"></i></a>
                    <h4>Your cart (3 Items)</h4>
                    <div class="minicart-content">
                        <ul class="clearfix">
                            <li class="item clearfix">
                                <a class="product-image" href="#">
                                    <img src="assets/images/product-images/cart-page-img1.jpg"
                                         data-src="assets/images/product-images/cart-page-img1.jpg" alt="" title="">
                                </a>
                                <div class="product-details">
                                    <a href="#" class="remove"><i class="an an-times" aria-hidden="true"></i></a>
                                    <a href="#" class="edit-i remove"><i class="icon an an-edit" aria-hidden="true"></i></a>
                                    <a class="product-title" href="cart-style1.html">Acer NX.MVMSI.035 Intel Core i3
                                        15.6 inches Laptop</a>
                                    <div class="variant-cart">Black / XL</div>
                                    <div class="wrapQtyBtn">
                                        <div class="qtyField">
                                            <a class="qtyBtn minus" href="javascript:void(0);"><i class="an an-minus"
                                                                                                  aria-hidden="true"></i></a>
                                            <input type="text" name="quantity" value="1" class="qty">
                                            <a class="qtyBtn plus" href="javascript:void(0);"><i class="an an-plus"
                                                                                                 aria-hidden="true"></i></a>
                                        </div>
                                    </div>
                                    <div class="priceRow">
                                        <div class="product-price">
                                            <span class="money">$59.00</span>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="item clearfix">
                                <a class="product-image" href="#">
                                    <img src="assets/images/product-images/cart-page-img2.jpg"
                                         data-src="assets/images/product-images/cart-page-img2.jpg" alt="" title="">
                                </a>
                                <div class="product-details">
                                    <a href="#" class="remove"><i class="an an-times" aria-hidden="true"></i></a>
                                    <a href="#" class="edit-i remove"><i class="icon an an-edit" aria-hidden="true"></i></a>
                                    <a class="product-title" href="cart-style1.html">Canon CSG-QX10 Full Shot Lens</a>
                                    <div class="variant-cart">Red / S</div>
                                    <div class="wrapQtyBtn">
                                        <div class="qtyField">
                                            <a class="qtyBtn minus" href="javascript:void(0);"><i class="an an-minus"
                                                                                                  aria-hidden="true"></i></a>
                                            <input type="text" name="quantity" value="1" class="qty">
                                            <a class="qtyBtn plus" href="javascript:void(0);"><i class="an an-plus"
                                                                                                 aria-hidden="true"></i></a>
                                        </div>
                                    </div>
                                    <div class="priceRow">
                                        <div class="product-price">
                                            <span class="money">$89.00</span>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="item clearfix">
                                <a class="product-image" href="#">
                                    <img src="assets/images/product-images/elt-p-18-1.jpg"
                                         data-src="assets/images/product-images/elt-p-18-1.jpg" alt="" title="">
                                </a>
                                <div class="product-details">
                                    <a href="#" class="remove"><i class="an an-times" aria-hidden="true"></i></a>
                                    <a href="#" class="edit-i remove"><i class="icon an an-edit" aria-hidden="true"></i></a>
                                    <a class="product-title" href="cart-style1.html">Fully Automatic Washing Machine</a>
                                    <div class="wrapQtyBtn">
                                        <div class="qtyField">
                                            <a class="qtyBtn minus" href="javascript:void(0);"><i class="an an-minus"
                                                                                                  aria-hidden="true"></i></a>
                                            <input type="text" name="quantity" value="1" class="qty">
                                            <a class="qtyBtn plus" href="javascript:void(0);"><i class="an an-plus"
                                                                                                 aria-hidden="true"></i></a>
                                        </div>
                                    </div>
                                    <div class="priceRow">
                                        <div class="product-price">
                                            <span class="money">$1189.00</span>
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="minicart-bottom">
                        <div class="subtotal list">
                            <span>Shipping:</span>
                            <span class="product-price">$10.00</span>
                        </div>
                        <div class="subtotal list">
                            <span>Tax:</span>
                            <span class="product-price">$05.00</span>
                        </div>
                        <div class="subtotal">
                            <span>Total:</span>
                            <span class="product-price">$93.13</span>
                        </div>
                        <div class="row mt-3 mb-3">
                            <div class="col-12 col-sm-12 col-md-6 col-lg-6 pr-0">
                                <a href="checkout-style2.html" class="btn proceed-to-checkout">Go to Checkout</a>
                            </div>
                            <div class="col-12 col-sm-12 col-md-6 col-lg-6">
                                <a href="cart-style1.html" class="btn btn-secondary cart-btn">View Cart</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--End MiniCart Drawer-->

    <!-- Quickview Modal -->
    <div class="modal fade" id="quickview_popup" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-12 col-sm-6 col-md-6 col-lg-6">
                            <div id="slider">
                                <!-- model thumbnail -->
                                <div id="quickView" class="carousel slide">
                                    <div class="quickview-in">
                                        <!-- image slide carousel items -->
                                        <div class="carousel-inner">
                                            <!-- slide 1 -->
                                            <div class="item carousel-item active" data-bs-slide-number="0">
                                                <img class="blur-up lazyload"
                                                     data-src="assets/images/product-images/elt-p-15.jpg"
                                                     src="assets/images/product-images/elt-p-15.jpg" alt="product"
                                                     title="">
                                            </div>
                                            <!-- End slide 1 -->
                                            <!-- slide 2 -->
                                            <div class="item carousel-item" data-bs-slide-number="1">
                                                <img class="blur-up lazyload"
                                                     data-src="assets/images/product-images/elt-p-15-1.jpg"
                                                     src="assets/images/product-images/elt-p-15-1.jpg" alt="product"
                                                     title="">
                                            </div>
                                            <!-- End slide 2 -->
                                            <!-- slide 3 -->
                                            <div class="item carousel-item" data-bs-slide-number="2">
                                                <img class="blur-up lazyload"
                                                     data-src="assets/images/product-images/elt-p-9.jpg"
                                                     src="assets/images/product-images/elt-p-9.jpg" alt="product"
                                                     title="">
                                            </div>
                                            <!-- End slide 3 -->
                                            <!-- slide 4 -->
                                            <div class="item carousel-item" data-bs-slide-number="3">
                                                <img class="blur-up lazyload"
                                                     data-src="assets/images/product-images/elt-p-8.jpg"
                                                     src="assets/images/product-images/elt-p-8.jpg" alt="product"
                                                     title="">
                                            </div>
                                            <!-- End slide 4 -->
                                            <!-- slide 5 -->
                                            <div class="item carousel-item" data-bs-slide-number="4">
                                                <img class="blur-up lazyload"
                                                     data-src="assets/images/product-images/elt-p-14.jpg"
                                                     src="assets/images/product-images/elt-p-14.jpg" alt="product"
                                                     title="">
                                            </div>
                                            <!-- End slide 5 -->
                                            <!-- slide 6 -->
                                            <div class="item carousel-item" data-bs-slide-number="5">
                                                <img class="blur-up lazyload"
                                                     data-src="assets/images/product-images/elt-p-14-1.jpg"
                                                     src="assets/images/product-images/elt-p-14-1.jpg" alt="product"
                                                     title="">
                                            </div>
                                            <!-- End slide 6 -->
                                        </div>
                                        <!-- End image slide carousel items -->
                                        <!-- arrow button -->
                                        <div class="np-btns">
                                            <a class="carousel-control left" href="#quickView"
                                               data-bs-target="#quickView" data-bs-slide="prev"><i
                                                    class="an an-angle-left"></i></a>
                                            <a class="carousel-control right" href="#quickView"
                                               data-bs-target="#quickView" data-bs-slide="next"><i
                                                    class="an an-angle-right"></i></a>
                                        </div>
                                        <!-- End arrow button -->
                                    </div>
                                    <!-- model thumbnail image -->
                                    <div class="model-thumbnail-img">
                                        <!-- model thumbnail slide -->
                                        <ul class="carousel-indicators list-inline">
                                            <!-- slide 1 -->
                                            <li class="list-inline-item active">
                                                <a id="carousel-selector-0" class="selected" data-bs-slide-to="0"
                                                   data-bs-target="#quickView">
                                                    <img class="blur-up lazyload"
                                                         data-src="assets/images/product-images/elt-p-15.jpg"
                                                         src="assets/images/product-images/elt-p-15.jpg" alt="product"
                                                         title="">
                                                </a>
                                            </li>
                                            <!-- End slide 1 -->
                                            <!-- slide 2 -->
                                            <li class="list-inline-item">
                                                <a id="carousel-selector-1" data-bs-slide-to="1"
                                                   data-bs-target="#quickView">
                                                    <img class="blur-up lazyload"
                                                         data-src="assets/images/product-images/elt-p-15-1.jpg"
                                                         src="assets/images/product-images/elt-p-15-1.jpg" alt="product"
                                                         title="">
                                                </a>
                                            </li>
                                            <!-- End slide 2 -->
                                            <!-- slide 3 -->
                                            <li class="list-inline-item">
                                                <a id="carousel-selector-2" data-bs-slide-to="2"
                                                   data-bs-target="#quickView">
                                                    <img class="blur-up lazyload"
                                                         data-src="assets/images/product-images/elt-p-9.jpg"
                                                         src="assets/images/product-images/elt-p-9.jpg" alt="product"
                                                         title="">
                                                </a>
                                            </li>
                                            <!-- End slide 3 -->
                                            <!-- slide 4 -->
                                            <li class="list-inline-item">
                                                <a id="carousel-selector-3" data-bs-slide-to="3"
                                                   data-bs-target="#quickView">
                                                    <img class="blur-up lazyload"
                                                         data-src="assets/images/product-images/elt-p-8.jpg"
                                                         src="assets/images/product-images/elt-p-8.jpg" alt="product"
                                                         title="">
                                                </a>
                                            </li>
                                            <!-- End slide 4 -->
                                            <!-- slide 5 -->
                                            <li class="list-inline-item">
                                                <a id="carousel-selector-4" data-bs-slide-to="4"
                                                   data-bs-target="#quickView">
                                                    <img class="blur-up lazyload"
                                                         data-src="assets/images/product-images/elt-p-14.jpg"
                                                         src="assets/images/product-images/elt-p-14.jpg" alt="product"
                                                         title="">
                                                </a>
                                            </li>
                                            <!-- End slide 5 -->
                                            <!-- slide 6 -->
                                            <li class="list-inline-item">
                                                <a id="carousel-selector-5" data-bs-slide-to="5"
                                                   data-bs-target="#quickView">
                                                    <img class="blur-up lazyload"
                                                         data-src="assets/images/product-images/elt-p-14-1.jpg"
                                                         src="assets/images/product-images/elt-p-14-1.jpg" alt="product"
                                                         title="">
                                                </a>
                                            </li>
                                            <!-- End slide 6 -->
                                        </ul>
                                        <!-- End model thumbnail slide -->
                                    </div>
                                    <!-- End model thumbnail image -->
                                </div>
                            </div>
                        </div>
                        <div class="col-12 col-sm-6 col-md-6 col-lg-6">
                            <div class="product-brand"><a href="#">Charcoal</a></div>
                            <h2 class="product-title">Product Quick View Popup</h2>
                            <div class="product-review">
                                <div class="rating">
                                    <i class="an an-star"></i><i class="an an-star"></i><i class="an an-star"></i><i
                                        class="an an-star"></i><i class="an an-star"></i>
                                </div>
                                <div class="reviews"><a href="#">5 Reviews</a></div>
                            </div>
                            <div class="product-info">
                                <div class="product-stock"><span class="instock">In Stock</span> <span
                                        class="outstock hide">Unavailable</span></div>
                                <div class="product-sku">SKU: <span class="variant-sku">19115-rdxs</span></div>
                            </div>
                            <div class="pricebox">
                                <span class="price old-price">$900.00</span>
                                <span class="price">$800.00</span>
                            </div>
                            <div class="sort-description">Shoplook Multipurpose Bootstrap 5 Html Template that will give
                                you and your customers a smooth shopping experience which can be used for various kinds
                                of stores such as fashion..
                            </div>
                            <form method="post" action="#" id="product_form--option" class="product-form">
                                <div class="product-options">
                                    <div class="swatch clearfix swatch-0 option1">
                                        <div class="product-form__item">
                                            <label class="label">Color:<span class="required">*</span> <span
                                                    class="slVariant">Red</span></label>
                                            <div class="swatch-element color">
                                                <input class="swatchInput" id="swatch-black" type="radio"
                                                       name="option-0" value="Black">
                                                <label class="swatchLbl small black" for="swatch-black"
                                                       title="Black"></label>
                                            </div>
                                            <div class="swatch-element color">
                                                <input class="swatchInput" id="swatch-blue" type="radio" name="option-0"
                                                       value="blue">
                                                <label class="swatchLbl small blue" for="swatch-blue"
                                                       title="Blue"></label>
                                            </div>
                                            <div class="swatch-element color">
                                                <input class="swatchInput" id="swatch-red" type="radio" name="option-0"
                                                       value="Blue">
                                                <label class="swatchLbl small red" for="swatch-red" title="Red"></label>
                                            </div>
                                            <div class="swatch-element color">
                                                <input class="swatchInput" id="swatch-pink" type="radio" name="option-0"
                                                       value="Pink">
                                                <label class="swatchLbl color small pink" for="swatch-pink"
                                                       title="Pink"></label>
                                            </div>
                                            <div class="swatch-element color">
                                                <input class="swatchInput" id="swatch-orange" type="radio"
                                                       name="option-0" value="Orange">
                                                <label class="swatchLbl color small orange" for="swatch-orange"
                                                       title="Orange"></label>
                                            </div>
                                            <div class="swatch-element color">
                                                <input class="swatchInput" id="swatch-yellow" type="radio"
                                                       name="option-0" value="Yellow">
                                                <label class="swatchLbl color small yellow" for="swatch-yellow"
                                                       title="Yellow"></label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="swatch clearfix swatch-1 option2">
                                        <div class="product-form__item">
                                            <label class="label">Size:<span class="required">*</span> <span
                                                    class="slVariant">XS</span></label>
                                            <div class="swatch-element xs">
                                                <input class="swatchInput" id="swatch-1-xs" type="radio" name="option-1"
                                                       value="XS">
                                                <label class="swatchLbl medium" for="swatch-1-xs" title="XS">XS</label>
                                            </div>
                                            <div class="swatch-element s">
                                                <input class="swatchInput" id="swatch-1-s1" type="radio" name="option-1"
                                                       value="S">
                                                <label class="swatchLbl medium" for="swatch-1-s1" title="S">S</label>
                                            </div>
                                            <div class="swatch-element m">
                                                <input class="swatchInput" id="swatch-1-m" type="radio" name="option-1"
                                                       value="M">
                                                <label class="swatchLbl medium" for="swatch-1-m" title="M">M</label>
                                            </div>
                                            <div class="swatch-element l">
                                                <input class="swatchInput" id="swatch-1-l" type="radio" name="option-1"
                                                       value="L">
                                                <label class="swatchLbl medium" for="swatch-1-l" title="L">L</label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="product-action clearfix">
                                        <div class="quantity">
                                            <div class="wrapQtyBtn">
                                                <div class="qtyField">
                                                    <a class="qtyBtn minus" href="javascript:void(0);"><i
                                                            class="an an-minus" aria-hidden="true"></i></a>
                                                    <input type="text" id="quantityp" name="quantity" value="1"
                                                           class="product-form__input qty">
                                                    <a class="qtyBtn plus" href="javascript:void(0);"><i
                                                            class="an an-plus" aria-hidden="true"></i></a>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="add-to-cart">
                                            <button type="button" class="btn button-cart">
                                                <span>Add to cart</span>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                            <div class="wishlist-btn">
                                <a class="wishlist add-to-wishlist" href="#" title="Add to Wishlist"><i
                                        class="icon an an-heart-o" aria-hidden="true"></i> <span>Add to Wishlist</span></a>
                                <a class="wishlist add-to-compare ms-2" href="#" title="Add to Wishlist"><i
                                        class="icon an an-balance-scale" aria-hidden="true"></i>
                                    <span>Add to Compare</span></a>
                            </div>
                            <div class="share-icon">
                                <span>Share:</span>
                                <ul class="list--inline social-icons">
                                    <li><a href="#"><i class="icon an an-facebook-f"></i></a></li>
                                    <li><a href="#"><i class="icon an an-twitter"></i></a></li>
                                    <li><a href="#"><i class="icon an an-pinterest-p"></i></a></li>
                                    <li><a href="#"><i class="icon an an-instagram"></i></a></li>
                                    <li><a href="#"><i class="icon an an-youtube"></i></a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--End Quickview Modal-->

    <!-- Start Addtocart Added Popup -->
    <div class="modal fade" id="pro-addtocart-popup" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-12 col-sm-12 col-md-12 col-lg-12">
                            <div class="addtocart-inner text-center clearfix">
                                <h4 class="title">Added to your shopping cart successfully.</h4>
                                <div class="pro-img mb-2">
                                    <img class="img-fluid blur-up lazyload"
                                         src="assets/images/product-images/addtocart-popup-img.jpg"
                                         data-src="assets/images/product-images/addtocart-popup-img.jpg"
                                         alt="Added to your shopping cart successfully."
                                         title="Added to your shopping cart successfully."/>
                                </div>
                                <div class="pro-details">
                                    <p class="pro-name mb-1">Mobile Galaxy S6 Edge</p>
                                    <p class="sku mb-0">Color: Gray</p>
                                    <p class="mb-0 qty-total">1 X $113.88</p>
                                    <div class="addcart-total mt-3 mb-3">
                                        Total: <b class="price">$113.88</b>
                                    </div>
                                    <div class="button-action">
                                        <a href="checkout-style1.html" class="btn btn-primary view-cart mx-1">Go To
                                            Checkout</a>
                                        <a href="index.html" class="btn btn-secondary">Continue Shopping</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- End Addtocart Added Popup -->

    <!-- Including Jquery -->
    <script th:src="@{/assets/js/vendor/jquery-3.3.1.min.js}"></script>
    <script th:src="@{/assets/js/vendor/js.cookie.js}"></script>
    <!--Including Javascript-->
    <script th:src="@{/assets/js/plugins.js}"></script>
    <script th:src="@{/assets/js/main.js}"></script>

</div>
</body>
</html>
